<html>
<head>
	<script type="text/javascript" src="formLib.js"></script>
	<!--script type="text/javascript" src="formLib.min.js"></script-->
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<style type="text/css">
	.error{ 
		color: red;
		/* инлайновый стиль 
		display: inline;
		margin-left: 10px;
		vertical-align: top; */
	}
	.required{ 
		background-color: #FFF6F6
	}
	input[type=text], textarea {
		width: 150px;
		border-radius: 4px;
	}
	</style>
</head>
<body>
<script type="text/javascript">
var stdCheck = {
	EMAIL: { 
		label:'Email', 
		required: 1, 
		regexp:/^([a-z0-9_\-]+\.)*[a-z0-9_\-]+@([a-z0-9][a-z0-9\-]*[a-z0-9]\.)+[a-z]{2,4}$/i,
		e_message: 'некорректный E-mail адрес',
		filter:{
			regexp: /^([a-z0-9_\.\-]+@?|[a-z0-9_\.\-]+@[a-z0-9_\-]+\.?|[a-z0-9_\.\-]+@[a-z0-9_\-]+\.[a-z]{1,4})$/i
		}
	}
}

formLib.errorClass = 'error';
formLib.messageFormat = '{FIELDLABEL}: {MESSAGE}';
var feedbackFormRules = {
	Name: { 
		label:'Имя', 
		required: 1, 
		regexp:/^[А-яЁёA-Za-z \-]+$/i
		,e_message: 'только буквы, пробелы и тире',
		//если filter.regexp=true вместо регулярки, то используется регулярка всего правила
		filter:{ regexp: true }
	},
	
	Email: stdCheck.EMAIL, // использование сторонней библиотеки стандартов
	/*{ 
		label:'Email', 
		required: 1, 
		regexp:/^([a-z0-9_\-]+\.)*[a-z0-9_\-]+@([a-z0-9][a-z0-9\-]*[a-z0-9]\.)+[a-z]{2,4}$/i
		,e_message: 'некорректный E-mail адрес'
	}*/
	Email2: stdCheck.EMAIL,
	
	Phone: { 
		label:'Телефон', 
		required: 0, 
		regexp: /^\d\(\d{3}\)\d{3} \d{2} \d{2}$/,
		e_message: 'формат 9(999)999 99 99',
		filter:{
			regexp: /^\d\(?\d{0,3}\)?\d{0,3} ?\d{0,2} ?\d{0,2}$/,// /^(\d|\d\(\d{0,3}\)?|\d\(\d{3}\)\d{0,3} ?|\d\(\d{3}\)\d{0,3} \d{0,2} ?|\d\(\d{3}\)\d{0,3} \d{0,2} \d{0,2})$/,
			mask: '#(###)### ## ##'
		}
	}, 
	//несуществующее поле, ошибку не вызовет
	PhoneNotExists: { 
		label:'Телефон', 
		required: 1, 
		regexp:/^\d{5,11}$/
		,e_message: 'только цифры от 5 до 11'
	},
	
	BirthDate: { 
		label:'Дата рождения', 
		required: 0, 
		regexpArr:[
			{regexp:/^\d{2}\.\d{2}\.\d{4}$/, e_message: 'формат дд.мм.гггг'}
			//,{regexp:/^[0-3]\d\.[0-1]\d\.[1-2]\d{3}$/, e_message: 'неверные значения дня, месяца или года'}
		],
		func: function( form, fields, key ){ //валидность даты
			var dv = form.elements[key].value, newDate = new Date,
				dd=+dv.substr(0,2), dm=+dv.substr(3,2), dy=+dv.substr(6,4);
			if(!isValidDate( dd, dm, dy )) return 'дата некорректна';
			if( dy<1901 ) return 'пожалуй, Вы слишком стары..';
			if( new Date( dy, dm-1, dd) > newDate ) return 'Вы родились в будущем?..';
			else return '';
		},
		filter:{
			regexp: /^(\d{1,2}\.?|\d{1,2}\.\d{1,2}\.?|\d{1,2}\.\d{1,2}\.\d{1,4})$/,
			mask: '##.##.####'//'00.00.0000'
		}
	},

	PrefTime:{
		label: 'Желаемое время встречи',
		required: 0,
		regexp:/^\d{2}:\d{2} - \d{2}:\d{2}$/,
		e_message: 'формат 00:00 - 00:00',
		filter:{
			regexp: /^(\d{1,2}:?|\d{1,2}:\d{1,2}|\d{1,2}:\d{1,2}[ \-]*|\d{1,2}:\d{1,2} - \d{1,2}:?|\d{0,2}:\d{0,2} - \d{0,2}:\d{0,2})$/,
			// /^\d{0,2}:?\d{0,2} ?-? ?\d{0,2}:?\d{0,2}$/,// 
			mask: '##:## - ##:##'
		}
	},
	
	PrefFood: 'Любимое блюдо',// обязательное, но свободное для заполнения
	
	Message: { 
		label:'Сообщение', 
		required: 1, 
		regexpArr:[
			{regexp:/^[\s\S]{10,}$/, e_message: 'слишком короткое сообщение'}
			,{regexp:/^[\s\S]{10,250}$/, e_message: 'слишком длинное сообщение'}
		]
		
	}
};

function feedbackFormSubmit( formEl ){		
	//callback: outErrObj or alertErrObj or function(e_obj, form){ formLib.outErrObj(e_obj, form); formLib.alertErrObj(e_obj, form); } or...
	if( formLib.validateFields( formEl, feedbackFormRules, formLib.outErrObj ) ) return false; 
	
	var numb = (Math.random()+'').slice(-2), /* случайное 2-значное число */
	resp=prompt('Если Вы не робот, введите цифры '+numb, '');
	
	if(resp==numb) {		
		
		/*
		$.ajax({
			type: 'POST',
			url: '/ajax/feedbackForm.php',
			data: formLib.getRequestBody( formEl ),
			dataType: 'json',
			cache: false,
			success: function( data, textStatus ){
				alert( data.message ); */ alert( 'Сообщение отправлено!\nСпасибо.' );
				formLib.clearValues( formEl, 0, ['submit'] );
		/*	},
			error: function( xhr, textStatus, thrownError ){
				alert( textStatus +': '+thrownError );
			}
		});*/

	}else
	if(resp!==null){
		alert('Попробуйте снова.');
	}
	
	return false;
};

function isValidDate(d, m, y) {
    var dt = new Date(y, m-1, d);
    return ((y == dt.getFullYear()) && ((m-1) == dt.getMonth()) && (d == dt.getDate()));
}


</script>
<form action="" method="POST" name="feedback_form" id="feedback_form" onsubmit="feedbackFormSubmit( this ); return false;">
	<p><input type="text" name="Name" id="Name" placeholder="Ваше Имя:" title="Ваше Имя:" class="required"></p>
	<p><input type="text" name="Email" id="Email" placeholder="Ваш Email:" title="Ваш Email:" class="required"></p>
	<p><input type="text" name="Phone" id="Phone" placeholder="Ваш телефон:" title="Ваш телефон:"></p>
	<p><input type="text" name="PrefFood" id="PrefFood" placeholder="Любимое блюдо:" title="Любимое блюдо:" class="required"></p>
	<p><input type="text" name="BirthDate" id="BirthDate" placeholder="Дата рождения:" title="Дата рождения:"></p>
	<p><input type="text" name="PrefTime" id="PrefTime" placeholder="Желаемое время встречи:" title="Желаемое время встречи:"></p>
	<p><textarea rows="5" cols="10" name="Message" id="Message" placeholder="Сообщение:" title="Сообщение:" class="required"></textarea></p>
	<noscript>javascript отключен :(</noscript>
	<script type="text/javascript">document.write('<p><input type="submit" name="submit" value="Отправить..."></p>')</script>	
</form>
<script type="text/javascript">
formLib.activateOnBlurElems( document.forms['feedback_form'], feedbackFormRules );
formLib.activateFilters( document.forms['feedback_form'], feedbackFormRules, function( form, inpName, insSym, isError){
	var messStr = isError? 'символ "'+insSym+'" не подходит': '' ;
	formLib.outMess( form, inpName, messStr, formLib.errorClass );
});
</script>
<hr>
<input type="button" onclick="formLib.clearMessages( document.forms['feedback_form'] )" value="Очистить сообщения">
<input type="button" onclick="formLib.clearValues( document.forms['feedback_form'], 0, ['submit'] )" value="Очистить значения">
<hr>
<h3>Отдельный элемент</h3>
<input type="text" name="Email2" id="Email2" placeholder="Ваш Email:" title="Ваш Email:" class="required">
<script type="text/javascript">
formLib.activateOnBlurElem( 0, 'Email2', feedbackFormRules );
formLib.activateFilter( 0, 'Email2', feedbackFormRules, function( form, inpName, insSym, isError){
	var messStr = isError? 'символ "'+insSym+'" не подходит': '' ;
	formLib.outMess( form, inpName, messStr, formLib.errorClass );
});
</script>
</body>
</html>